<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<style type="text/css">
			* {
				margin: 0;
			}
			
			body {
				background-color: black;
			}
			
			ul li {
				float: left;
				list-style: none;
				margin-left: 20px;
				position: relative;
				font-size: 50px;
				color: white;
			}
			
			ul li:hover::after {
				width: 100%;
			}
			
			li::after {
				content: "";
				height: 2px;
				width: 0px;
				background-color: skyblue;
				position: absolute;
				right: 50%;
				bottom: 0;
				transform: translateX(50%);
				transition-property: width;
				transition-duration: .2s;
				transition-timing-function: linear;
			}
			
			ul li:hover {
				color: skyblue;
			}
		</style>
		<ul>
			<a href="new_file.html">
				<li>melon</li>
			</a>
			<li>loved</li>
			<li>by</li>
			<li>female</li>
		</ul>
	</body>

</html>